<?php
/**
 * 3-4岁专区认知内容示例管理页面
 */
require_once '../../../admin/check_session.php';
require_once '../../../includes/config.php';
require_once '../includes/CognitiveManager34.php';
require_once '../../../includes/MediaManager.php';

// 创建认知管理器实例
$cognitiveManager = new CognitiveManager34();
$mediaManager = new MediaManager();

// 检查内容ID参数
if (!isset($_GET['content_id']) || !isset($_GET['module_id'])) {
    // 如果没有提供内容ID或模块ID，重定向到模块列表页面
    header("Location: cognitive_modules.php");
    exit;
}

$contentId = (int)$_GET['content_id'];
$moduleId = (int)$_GET['module_id'];

// 获取模块信息
$module = $cognitiveManager->getModuleById($moduleId);
if (!$module) {
    // 如果模块不存在或不属于3-4岁年龄段，重定向到模块列表页面
    header("Location: cognitive_modules.php?error=invalid_module");
    exit;
}

// 获取内容信息
$content = $cognitiveManager->moduleManager->getContentById($contentId);
if (!$content || $content['module_id'] != $moduleId) {
    // 如果内容不存在或不属于当前模块，重定向到内容列表页面
    header("Location: cognitive_contents.php?module_id={$moduleId}&error=invalid_content");
    exit;
}

// 处理删除示例操作
if (isset($_POST['delete_example']) && isset($_POST['example_id'])) {
    $exampleId = (int)$_POST['example_id'];
    $result = $cognitiveManager->moduleManager->deleteExample($exampleId);
    
    if ($result) {
        $successMessage = "示例已成功删除";
    } else {
        $errorMessage = "删除示例时出错";
    }
}

// 处理激活/停用示例操作
if (isset($_POST['toggle_status']) && isset($_POST['example_id'])) {
    $exampleId = (int)$_POST['example_id'];
    $example = $cognitiveManager->moduleManager->getExampleById($exampleId);
    
    if ($example) {
        $newStatus = $example['is_active'] ? 0 : 1;
        $result = $cognitiveManager->moduleManager->updateExample($exampleId, ['is_active' => $newStatus]);
        
        if ($result) {
            $successMessage = "示例状态已更新";
        } else {
            $errorMessage = "更新示例状态时出错";
        }
    }
}

// 获取内容的所有示例
$examples = $cognitiveManager->getContentExamples($contentId);

// 获取内容的标题音频（如果有）
$titleAudio = null;
if (!empty($content['title_audio_id'])) {
    $titleAudio = $mediaManager->getMediaById($content['title_audio_id']);
}

// 添加页面标题
$pageTitle = "管理 "{$content['content_title']}" 的示例";
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle; ?> - KidsMind管理后台</title>
    <!-- 引入管理后台通用样式 -->
    <link rel="stylesheet" href="/admin/css/admin.css">
    <link rel="stylesheet" href="/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="/admin/css/fontawesome.min.css">
    <!-- 3-4岁专用样式 -->
    <style>
        .example-card {
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin-bottom: 20px;
            border: none;
            overflow: hidden;
        }
        .example-card:hover {
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
            transform: translateY(-5px);
        }
        .example-header {
            padding: 15px;
            border-radius: 15px 15px 0 0;
        }
        .example-body {
            padding: 15px;
            background-color: #fff;
        }
        .example-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .badge-status {
            font-size: 0.8rem;
            padding: 5px 10px;
            border-radius: 20px;
        }
        .add-example-card {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 250px;
            background-color: #f8f9fa;
            border: 2px dashed #dee2e6;
            cursor: pointer;
            border-radius: 15px;
            transition: all 0.3s ease;
        }
        .add-example-card:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }
        .add-example-icon {
            font-size: 3rem;
            color: #6c757d;
        }
        .content-info {
            background-color: <?php echo getColorCode($module['background_color']); ?>;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .content-color {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .breadcrumb-nav {
            margin-bottom: 20px;
        }
        .breadcrumb-item a {
            text-decoration: none;
            color: inherit;
        }
        .breadcrumb-item a:hover {
            color: #0d6efd;
        }
        .audio-container {
            margin-top: 10px;
            padding: 10px;
            background-color: rgba(255,255,255,0.5);
            border-radius: 10px;
        }
        .audio-container audio {
            width: 100%;
            border-radius: 8px;
        }
        /* 马卡龙色系配色 */
        .bg-pastel-pink { background-color: #FFD6E0; }
        .bg-pastel-blue { background-color: #D6E5FF; }
        .bg-pastel-green { background-color: #D6FFE1; }
        .bg-pastel-yellow { background-color: #FFEFD6; }
        .bg-pastel-purple { background-color: #E9D6FF; }
    </style>
</head>
<body>
    <?php include '../../../admin/includes/header.php'; ?>
    
    <div class="container-fluid">
        <div class="row">
            <?php include '../../../admin/includes/sidebar.php'; ?>
            
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2"><?php echo $pageTitle; ?></h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group me-2">
                            <a href="example_edit.php?content_id=<?php echo $contentId; ?>&module_id=<?php echo $moduleId; ?>" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-plus"></i> 添加新示例
                            </a>
                            <a href="cognitive_contents.php?module_id=<?php echo $moduleId; ?>" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回内容列表
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 面包屑导航 -->
                <nav aria-label="breadcrumb" class="breadcrumb-nav">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="cognitive_modules.php">认知模块</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="cognitive_contents.php?module_id=<?php echo $moduleId; ?>">
                                <?php echo htmlspecialchars($module['module_name']); ?>
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <?php echo htmlspecialchars($content['content_title']); ?> 的示例
                        </li>
                    </ol>
                </nav>
                
                <?php if (isset($successMessage)): ?>
                <div class="alert alert-success" role="alert">
                    <?php echo $successMessage; ?>
                </div>
                <?php endif; ?>
                
                <?php if (isset($errorMessage)): ?>
                <div class="alert alert-danger" role="alert">
                    <?php echo $errorMessage; ?>
                </div>
                <?php endif; ?>
                
                <!-- 内容信息卡片 -->
                <div class="content-info">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h3 class="mb-2">
                                <?php if (!empty($content['color_code'])): ?>
                                <span class="content-color" style="background-color: <?php echo $content['color_code']; ?>"></span>
                                <?php endif; ?>
                                <?php echo htmlspecialchars($content['content_title']); ?>
                            </h3>
                            <p class="mb-2 text-muted"><?php echo nl2br(htmlspecialchars($content['description'] ?: '暂无描述')); ?></p>
                            <?php if ($titleAudio): ?>
                            <div class="audio-container">
                                <div class="d-flex align-items-center">
                                    <div class="me-3">
                                        <i class="fas fa-volume-up"></i> 标题音频:
                                    </div>
                                    <audio controls src="<?php echo $titleAudio['file_path']; ?>" class="ms-2"></audio>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <a href="cognitive_content_edit.php?id=<?php echo $contentId; ?>&module_id=<?php echo $moduleId; ?>" class="btn btn-outline-primary me-2">
                                <i class="fas fa-edit"></i> 编辑内容
                            </a>
                            <a href="cognitive_contents.php?module_id=<?php echo $moduleId; ?>" class="btn btn-outline-secondary">
                                <i class="fas fa-list"></i> 所有内容
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <?php if (empty($examples)): ?>
                    <div class="col-12">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i> 该内容下还没有示例。点击 "添加新示例" 按钮开始创建示例。
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php foreach ($examples as $example): ?>
                    <?php
                        // 获取示例的音频（如果有）
                        $exampleAudio = null;
                        if (!empty($example['audio_id'])) {
                            $exampleAudio = $mediaManager->getMediaById($example['audio_id']);
                        }
                    ?>
                    <div class="col-md-4">
                        <div class="card example-card">
                            <div class="example-header bg-<?php echo getModuleColor($module); ?>">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><?php echo htmlspecialchars($example['example_title']); ?></h5>
                                    <?php if ($example['is_active']): ?>
                                    <span class="badge bg-success badge-status">已激活</span>
                                    <?php else: ?>
                                    <span class="badge bg-secondary badge-status">未激活</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="example-body">
                                <?php if (!empty($example['image_path'])): ?>
                                <img src="<?php echo $example['image_path']; ?>" class="example-image" alt="<?php echo htmlspecialchars($example['example_title']); ?>">
                                <?php else: ?>
                                <div class="example-image bg-light d-flex justify-content-center align-items-center">
                                    <span class="text-muted">无图片</span>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($exampleAudio): ?>
                                <div class="mb-3">
                                    <audio controls src="<?php echo $exampleAudio['file_path']; ?>" class="w-100"></audio>
                                </div>
                                <?php endif; ?>
                                
                                <p class="text-muted mb-3"><?php echo nl2br(htmlspecialchars($example['description'] ?: '暂无描述')); ?></p>
                                
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <small class="text-muted">更新于: <?php echo date('Y-m-d H:i', strtotime($example['updated_at'])); ?></small>
                                    <small class="text-muted">排序: <?php echo $example['example_order']; ?></small>
                                </div>
                                
                                <div class="btn-group w-100" role="group">
                                    <a href="example_edit.php?id=<?php echo $example['example_id']; ?>&content_id=<?php echo $contentId; ?>&module_id=<?php echo $moduleId; ?>" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <form method="post" onsubmit="return confirm('确定要<?php echo $example['is_active'] ? '停用' : '激活'; ?>该示例吗？');" style="display: inline;">
                                        <input type="hidden" name="example_id" value="<?php echo $example['example_id']; ?>">
                                        <button type="submit" name="toggle_status" class="btn btn-outline-<?php echo $example['is_active'] ? 'warning' : 'success'; ?> btn-sm">
                                            <i class="fas fa-<?php echo $example['is_active'] ? 'pause' : 'play'; ?>"></i> 
                                            <?php echo $example['is_active'] ? '停用' : '激活'; ?>
                                        </button>
                                    </form>
                                    <form method="post" onsubmit="return confirm('确定要删除该示例吗？此操作不可撤销！');" style="display: inline;">
                                        <input type="hidden" name="example_id" value="<?php echo $example['example_id']; ?>">
                                        <button type="submit" name="delete_example" class="btn btn-outline-danger btn-sm">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    
                    <!-- 添加新示例卡片 -->
                    <div class="col-md-4">
                        <a href="example_edit.php?content_id=<?php echo $contentId; ?>&module_id=<?php echo $moduleId; ?>" class="text-decoration-none">
                            <div class="add-example-card">
                                <div class="text-center">
                                    <div class="add-example-icon mb-2">
                                        <i class="fas fa-plus-circle"></i>
                                    </div>
                                    <h5 class="mb-0">添加新示例</h5>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script src="/admin/js/bootstrap.bundle.min.js"></script>
    <script src="/admin/js/jquery-3.6.0.min.js"></script>
</body>
</html>

<?php
/**
 * 根据颜色名称获取颜色代码
 */
function getColorCode($colorName) {
    $colorMap = [
        'pink' => '#FFD6E0',
        'blue' => '#D6E5FF',
        'green' => '#D6FFE1',
        'yellow' => '#FFEFD6',
        'purple' => '#E9D6FF'
    ];
    
    return isset($colorMap[$colorName]) ? $colorMap[$colorName] : '#FFD6E0';
}

/**
 * 根据模块信息返回对应的色系类
 */
function getModuleColor($module) {
    $colorMap = [
        'pink' => 'pastel-pink',
        'blue' => 'pastel-blue',
        'green' => 'pastel-green',
        'yellow' => 'pastel-yellow',
        'purple' => 'pastel-purple'
    ];
    
    if (isset($module['background_color']) && array_key_exists($module['background_color'], $colorMap)) {
        return $colorMap[$module['background_color']];
    }
    
    // 根据模块ID分配固定颜色，确保相同模块总是获得相同颜色
    $colors = array_values($colorMap);
    $index = $module['module_id'] % count($colors);
    return $colors[$index];
} 